<template>
  <div class="container">
    <el-row :gutter="20" class="top">
      <el-col :span="6">
        <indicators />
      </el-col>
      <el-col :span="6">
        <lineChart />
      </el-col>
      <el-col :span="12">
        <gaugeChart />
      </el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="16">
        <barChart />
      </el-col>
      <el-col :span="8">
        <workTime />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <photo />
      </el-col>
      <el-col :span="12">
        <curveChart />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import indicators from './components/indicators'
import lineChart from './components/lineChart'
import gaugeChart from './components/gaugeChart'
import barChart from './components/barChart'
import workTime from './components/workTime'
import photo from './components/photo'
import curveChart from './components/curveChart'

export default {
  components: {
    indicators,
    lineChart,
    gaugeChart,
    barChart,
    workTime,
    photo,
    curveChart
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
  padding: 20px;
  font-size: 14px;
  background: #020002;
  color: rgba(221, 221, 221, 0.8);
  .el-row {
    margin-bottom: 30px;
  }
}
</style>
